<template>
  <div>
    <Header />
    <Right />
    <!-- <div class="home"> -->
    <!-- 轮播图 -->
    <div class="swiper">
      <van-swipe class="swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item, index) in details.img" :key="index">
          <img :src="details.img[index]" alt class="swiper_img" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- <img src="../../assets/img/banner.png" alt class="swiper_img" /> -->
    <div class="details_center">
      <div class="details_box"></div>
      <div class="village">
        <p class="village_title">{{ details.title }}</p>
        <div class="village_label">
          <div class="label">
            <p
              class="matching"
              v-for="(item, index) in details.houseLabelNameList"
              :key="index"
            >{{ item }}</p>
          </div>
          <p class="follow" @click="Onfollow()">
            <img src="../../assets/img/ygzfy.png" alt v-if="details.ynFollow != '1'" />
            <img src="../../assets/img/ygz.png" alt v-else />
            关注
          </p>
        </div>
        <p class="village_price">
          <span class="shooting">
            <span class="shooting_num">{{ details.startSalePrice }}</span>万起拍价
          </span>
          <span class="market">
            市场参考价：
            <span v-if="details.marketSalePrice">
              {{
              details.marketSalePrice
              }}
            </span>
            <span v-else>--</span>万
          </span>
          <span class="market" v-if="details.sellStage == '拍卖结束'">成交价：{{ details.completePrice }}万</span>
        </p>
        <p class="countdown countdown_time" @click="Onremind">
          <!-- 倒计时:
          <span class="countdown_time">{{ details.bondEndDateStr }}</span>-->
          [设置提醒]
        </p>
        <div class="house_details">
          <p>
            房屋户型：{{ details.bedRoomCount }}室{{
            details.visitorRoomCount
            }}厅
          </p>
          <p v-if="details.coveredArea">建筑面积：{{ details.coveredArea }}</p>
          <p v-if="details.directionName">朝向：{{ details.directionName }}</p>
          <p>所在楼层：{{ details.floor }}层/共{{ details.totalFloor }}层</p>
          <p v-if="details.houseTypeName">房屋类型：{{ details.houseTypeName }}</p>
          <p v-if="details.buildDateStr">年代：{{ details.buildDateStr }}</p>
        </div>
        <div class="village_details">
          <p v-if="details.communityName">
            小区名称:
            <span>{{ details.communityName }}</span>
          </p>
          <p v-if="details.houseNatureName">
            性 质：
            <span>{{ details.houseNatureName }}</span>
          </p>
          <p v-if="details.sellStage">
            阶 段：
            <span>{{ details.sellStage }}</span>
          </p>
          <p v-if="details.bond">
            保 证 金:
            <span>{{ details.bond }}万</span>
          </p>
          <p v-if="details.id">
            编 号：
            <span>{{ details.id }}</span>
          </p>
          <p v-if="details.startSaleTimeStr">
            开拍时间:
            <span>{{ details.startSaleTimeStr }}</span>
          </p>
        </div>
      </div>
      <p class="lion"></p>
      <div class="manager" v-if="details.manager">
        <p class="manager_title">法拍经理</p>
        <div class="manager_details" @click="Onmanager(details.manager.id)">
          <img
            :src="details.manager.headUrl"
            alt
            class="manager_head"
            v-if="details.manager.headUrl"
          />
          <div>
            <p class="manager_name" v-if="details.manager.name">
              {{ details.manager.name }}
              <span>满意度99%</span>
            </p>
            <p class="manager_text">从业5年 服务客户{{ details.manager.customerNum }}人</p>
            <p class="manager_label">{{ details.manager.info }}</p>
          </div>
          <div class="manager_img">
            <img src="../../assets/image/dh_2.png" alt />
            <img src="../../assets/image/zx_2.png" alt />
          </div>
        </div>
      </div>
      <p class="lion"></p>
      <div v-if="details.community">
        <p class="manager_title">小区介绍</p>
        <div class="introduce">
          <p v-if="details.countyName">
            所在区域:
            <span>{{ details.countyName }}</span>
          </p>
          <p v-if="details.community.houseTime">
            建筑年代:
            <span>{{ details.community.houseTime }}</span>
          </p>
          <p v-if="details.community.householdNum">
            总 户 数:
            <span>{{ details.community.householdNum }}</span>
          </p>
          <p v-if="details.community.parkingSpace">
            停 车 位:
            <span>{{ details.community.parkingSpace }}</span>
          </p>
          <p v-if="details.community.floorage">
            建筑面积:
            <span>{{ details.community.floorage }}</span>
          </p>
          <p v-if="details.community.developers">
            开 发 商:
            <span>{{ details.community.developers }}</span>
          </p>
        </div>
        <p class="introduce_more" @click="Onmore(details.community)">查看更多</p>
      </div>
      <p class="lion"></p>
      <div>
        <p class="manager_title">周边配套</p>
        <Map :lng="details.lng" :lat="details.lat" />
      </div>
      <img src="../../assets/image/dkgg.png" alt @click="Onloan" class="loan_img" />
      <div>
        <p class="manager_title" style="padding-bottom:0">推荐房源</p>
        <List v-bind:list="allHouse" />
      </div>
    </div>
    <!-- 法拍联系人底部 -->
    <!-- <div class="contacts" v-if="details.manager">
      <div class="contacts_head">
        <p>
          <img src="../../assets/image/hxm.png" alt />
        </p>
        <p>{{ details.manager.name }}</p>
      </div>
      <div class="contacts_btn btn1" @click="On53">在线咨询</div>
      <div
        class="contacts_btn btn2"
        @click="callPhone(details.manager.telephone)"
      >
        电话咨询
      </div>
    </div>-->
    <Footer />

    <div class="contacts_box"></div>
    <van-popup v-model="disable" class="loan_dialog dialog">
      <p class="title">
        法拍房性价比高,
        <span class="text">拍卖金</span>不够怎么办
      </p>
      <div class="nothing">
        <div>
          <img src="../../assets/img/wh.png" alt />
          <p>没有资金</p>
        </div>
        <div>
          <img src="../../assets/img/wh.png" alt />
          <p>没有资金</p>
        </div>
        <div>
          <img src="../../assets/img/wh.png" alt />
          <p>没有资金</p>
        </div>
      </div>
      <div class="subscribe_ipt">
        <van-field v-model="sms" center clearable placeholder="请输入手机号">
          <template #button>
            <van-button class="subscribe_btn">
              <span class="obtain" v-if="show" @click="OnCode">获取验证码</span>
              <span v-else>{{ second }}s</span>
            </van-button>
          </template>
        </van-field>
        <van-field v-model="value1" placeholder="请输入短信验证码" />
      </div>
      <p class="loan_btn" @click="OnpersonalLoan">定制个性化贷款服务</p>
    </van-popup>
  </div>
</template>
<script>
import rem from "@/assets/js/rem.js";
import Header from "@/components/m_file/header.vue";
import Footer from "@/components/m_file/footer.vue";
import List from "@/components/m_file/list.vue";
import Map from "@/components/m_file/map.vue";
import Right from "@/components/m_file/right.vue";
export default {
  data() {
    return {
      disable: false,
      value: "",
      active: "",
      sms: "",
      verifyCode: "",
      value1: "",
      details: "",
      id: "",
      show: true,
      timer: null,
      second: 60,
      allHouse: []
    };
  },
  mounted() {
    this.HouseList();
    this.id = this.$route.query.id;
    this.OngetHouseDetail();
  },
  watch: {
    $route() {
      this.details = "";
      this.id = this.$route.query.id;
      this.OngetHouseDetail();
      this.HouseList();
    }
  },
  methods: {
    On53() {
      window.location.href =
        "https://tb.53kf.com/code/client/9a12bb00652ff2c013fe004ae3947f845/1";
    },
    callPhone(val) {
      window.location.href = "tel://" + val;
    },
    Onmanager(val) {
      this.$router.push({ name: "M_manager", query: { id: val } });
    },
    HouseList() {
      const that = this;
      this.instance
        .HouseList({
          page: 1,
          limit: 6
        })
        .then(res => {
          console.log(res);
          if (res.data.code == "0") {
            that.allHouse = res.data.data;
            that.allHouse.forEach(item => {
              item.img = item.imgUrl.split(",");
            });
          }
        })
        .catch(function(error) {});
    },
    Onfollow() {
      if (this.details.ynFollow == 0) {
        this.$notify({ message: "请先登录" });
      } else if (this.details.ynFollow == 1) {
        this.instance
          .cancelHouseFollow({
            id: details.id
          })
          .then(res => {
            if (res.data.code == "0") {
              this.$notify({ message: "已取消关注" });
            }
          })
          .catch(function(error) {});
      } else {
        this.instance
          .addHouseFollow({
            houseId: details.id
          })
          .then(res => {
            if (res.data.code == "0") {
              this.$notify({ message: "关注成功" });
            }
          })
          .catch(function(error) {});
      }
    },
    Onloan() {
      this.disable = true;
      this.timer = setInterval(() => {
        if (this.second > 0) {
          this.second--;
        } else {
          this.show = true;
          clearInterval(this.timer);
          this.timer = null;
        }
      }, 1000);
    },
    OnCode() {
      this.show = false;
      this.timer = setInterval(() => {
        if (this.second > 0) {
          this.second--;
        } else {
          this.show = true;
          clearInterval(this.timer);
          this.second = 60;
          this.timer = null;
        }
      }, 1000);
      this.instance
        .getVerifyCode({
          id: this.input3
        })
        .then(res => {
          if (res.data.code == 0) {
            this.verifyCode = res.data.data;
          } else {
            clearInterval(this.timer);
            this.timer = null;
            this.show = true;
            this.second = 60;
          }
          this.$message({
            message: res.data.msg
          });
        })
        .catch(function(error) {});
    },
    Onmore(val) {
      this.$router.push({ name: "Introduce", params: { details: val } });
    },
    OngetHouseDetail() {
      console.log(this.id);
      this.instance
        .getHouseDetail({
          id: this.id
        })
        .then(res => {
          res.data.data.img = res.data.data.imgUrl.split(",");
          this.details = res.data.data;
          console.log(res.data.data);
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    Onremind() {
      this.instance
        .addRemind({
          id: this.details.id
        })
        .then(res => {
          this.$notify({ message: res.data.msg });
        })
        .catch(function(error) {});
    },
    OnpersonalLoan() {
      if (this.input == "" && this.input.length == 11) {
        this.$notify({
          message: "请输入正确的手机号码",
          duration: 2000
        });
      } else {
        if (this.input3 == this.verifyCode && this.input3 != "") {
          this.instance
            .personalLoan({
              telephone: this.input,
              verifyCode: this.input3
            })
            .then(res => {
              this.$notify({
                message: res.data.msg,
                duration: 2000
              });
              if (res.data.code == 0) {
                this.disable = false;
              }
            })
            .catch(function(error) {});
        } else {
          this.$notify({
            message: "请正确输入验证码",
            duration: 2000
          });
        }
      }
    }
  },
  components: {
    Header,
    Footer,
    Right,
    Map,
    List
  }
};
</script>
<style lang="less" scoped>
.el-dialog--center {
  width: 3rem;
}
.loan_dialog {
  padding: 0.2rem;
  .title {
    font-size: 0.18rem;
    text-align: center;
    color: #343434;
    .text {
      color: #f58058;
    }
  }
  .nothing {
    display: flex;
    margin: 0.2rem 0;
    text-align: center;
    div {
      width: 33.3%;

      font-size: 0.12rem;
      color: #666;
    }
  }
  .obtain {
    color: #f58058;
  }
  .loan_btn {
    line-height: 0.48rem;
    text-align: center;
    background: #f58058;
    border-radius: 4px;
    font-size: 0.15rem;
    color: #fff;
    margin: 30px auto 10px;
  }
  .subscribe_ipt {
    .van-cell {
      margin: 0 auto;
      width: 2.5rem;
      border: 1px solid #e0dfde;
      margin-bottom: 0.1rem;
      height: 0.38rem;
      .van-cell__value--alone {
        line-height: 0.25rem;
      }
    }
  }
  .subscribe_btn {
    border: none;
    border-left: 1px solid #e3e0df;
    color: #f5643e;
  }
}
.lion {
  width: 100%;
  height: 0.1rem;
  background: #f8f8f8;
}
.swiper_img {
  width: 100%;
  height: 1.69rem;
}

.details_center {
  position: relative;
  background: #fff;
  top: -0.3rem;
  border-radius: 0.15rem 0.15rem 0px 0px;
  .loan_img {
    margin-top: 0.2rem;
    width: 100%;
    border-radius: 54px;
  }
}
.village {
  .village_title {
    font-size: 0.2rem;
    font-weight: bold;
    color: #343434;
    line-height: 0.24rem;
    padding: 0.25rem 0.16rem 0.12rem 0.16rem;
  }
  .village_label {
    overflow: hidden;
    margin: 0 0.16rem;
    .label {
      float: left;
      p {
        float: left;
        background: #f4fdf6;
        font-size: 11px;
        margin-right: 0.1rem;
        padding: 0.065rem 0.09rem;
      }
      .matching {
        color: #24c068;
      }
      .ambient {
        color: #9098a2;
      }
      .traffic {
        color: #f87254;
      }
    }
    .follow {
      float: right;
      font-size: 0.12rem;
      line-height: 0.24rem;
      color: #f5643e;
      img {
        width: 0.15rem;
      }
    }
  }
  .village_price {
    font-size: 0.11rem;
    margin: 0.14rem 0.16rem;
    .shooting {
      color: #f87255;
      .shooting_num {
        font-size: 0.22rem;
      }
    }
    .market {
      color: #989898;
      margin-left: 0.1rem;
    }
  }
  .countdown {
    font-size: 0.11rem;
    cursor: pointer;
    // color: #343434;
    color: #f87e66;
    padding: 0.11rem 0.16rem;
    background: #f8f8f8;
    .countdown_time {
    }
  }
  .house_details {
    margin: 0 0.16rem;
    padding: 0.14rem 0;
    border-bottom: 0.02rem solid #f8f8f8;
    overflow: hidden;
    font-size: 0.11rem;
    color: #727272;
    line-height: 0.24rem;
    p {
      float: left;
      padding-right: 0.2rem;
    }
  }
  .village_details {
    font-size: 0.13rem;
    color: #86909a;
    line-height: 0.3rem;
    padding: 0.16rem;
    p {
      span {
        color: #343434;
      }
    }
  }
}
.manager_title {
  font-size: 0.15rem;
  font-weight: bold;
  color: #343434;
  line-height: 0.24rem;
  padding-left: 0.16rem;
  padding: 0.23rem 0.16rem 0.2rem 0.16rem;
}
.manager {
  .manager_details {
    padding: 0.15rem 0.16rem;
    display: flex;
    .manager_head {
      width: 0.5rem;
      height: 0.5rem;
      border-radius: 50%;
      margin-right: 0.1rem;
    }

    .manager_name {
      font-size: 0.15rem;
      font-weight: bold;
      margin-bottom: 0.11rem;
      color: #222222;
      line-height: 0.14rem;
      span {
        background: #f5643e;
        border-radius: 15px;
        font-size: 0.1rem;
        color: #ffffff;
        padding: 0.02rem 0.05rem;
      }
    }
    .manager_text {
      margin-bottom: 0.11rem;
      font-size: 0.12rem;
      color: #222222;
      line-height: 0.24rem;
    }
    .manager_label {
      font-size: 0.12rem;
      color: #9498a0;
    }
    .manager_img {
      margin-left: 0.5rem;
      overflow: hidden;
      img {
        vertical-align: super;
        width: 0.4rem;
        height: 0.4rem;
        border-radius: 50%;
        float: left;
        margin-right: 0.1rem;
      }
    }
  }
}
.introduce {
  padding: 0 0.16rem;
  overflow: hidden;
  font-size: 0.13rem;
  color: #86909a;
  p {
    float: left;
    margin-bottom: 0.17rem;
    width: 50%;
    span {
      color: #343434;
    }
  }
}
.introduce p:last-child {
  width: 100%;
}
.introduce_more {
  margin: 0.16rem;
  width: 3.45rem;
  height: 0.4rem;
  background: #f8f8f8;
  border-radius: 0.05rem;
  text-align: center;
  line-height: 0.4rem;
  font-size: 0.12rem;
  color: #9a9a9a;
}
.contacts_box {
  height: 0.65rem;
}
.contacts {
  position: fixed;
  bottom: 0;
  height: 0.65rem;
  width: 100%;
  background: #ffffff;
  overflow: hidden;
  div {
    float: left;
  }
  .contacts_head {
    padding: 0.2rem;
    img {
      width: 0.23rem;
      height: 0.23rem;
      border-radius: 50%;
      vertical-align: text-top;
    }
    p {
      font-size: 0.11rem;
      font-weight: bold;
      color: #333333;
    }
  }
  .contacts_btn {
    width: 1.28rem;
    height: 0.43rem;
    border-radius: 10px;

    text-align: center;
    line-height: 0.43rem;
    font-size: 0.14rem;
    font-weight: bold;
    color: #ffffff;
  }
  .btn1 {
    background: #f5643e;
    margin: 0.14rem 0.2rem 0.14rem 0;
  }
  .btn2 {
    background: #549bf0;
    margin: 0.14rem 0;
  }
}
.el-dialog--center .el-dialog__body {
  padding: 0;
}
</style>
